<template>
  <a-card :bordered="false">
    <!--  #####################查询条件###################  -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input v-model="queryParam.realName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons"
                  :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--  #####################查询条件###################  -->

    <!--  #####################操作###################  -->
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleAdd()">新建</a-button>
    </div>
    <!--  #####################操作###################  -->

    <!--  #####################表格###################  -->
    <s-table ref="table" :columns="columns" :data="loadData">
      <span slot="fileUrl" slot-scope="text, record">
        <img :src="text" alt="" style="max-width: 150px">
      </span>
      <a-tag slot="status" slot-scope="text" :color="text | statusColorFilter">
        {{text | statusFilter}}
      </a-tag>
      <a-tag slot="type" slot-scope="text, record" :color="text | typeColorFilter">
        {{text | typeFilter}}
      </a-tag>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:edit @click="handleEdit(record)">修改</a>
          <a-divider v-action:edit type="vertical"/>
          <a v-action:edit @click="handleDel(record)">删除</a>
        </template>
      </span>

    </s-table>
    <config-edit ref="createModal" :editProps="editProps" @ok="refresh"/>
    <!--  #####################表格###################  -->

    <!--  #####################打开的页面###################  -->

    <!--  #####################打开的页面###################  -->
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import configEdit from './configEdit'
  import { selectPage, del } from '@/api/system/config'

  /**
   * 组件
   */
  const components = { STable, configEdit}

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '编码',
      dataIndex: 'code'
    },
    {
      title: '内容',
      dataIndex: 'content'
    },
    {
      title: '名称',
      dataIndex: 'name'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 150,
      scopedSlots: {
        customRender: 'action'
      }
    }
  ]


  /**
   * 数据
   */
  const data = function() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      editProps: [],
      customers: [],
      storeCode:null,

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      }
    }
  }

  const created = function() {

  }

  /**
   * 过滤器
   */
  const filters = {
    statusFilter(status) {
      return statusMap[status].text
    },
    statusColorFilter(status) {
      return statusMap[status].status
    },
    typeFilter(type) {
      return typeMap[type].text
    },
    typeColorFilter(type) {
      return typeMap[type].status
    }
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    name: 'merCouponList',
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    editProps: [],
    watch: watch,
    /**
     * 方法
     */
    methods: {
      handleAdd() {
        this.$refs.createModal.add()
      },
      handleEdit (record) {
        this.$refs.createModal.edit(record)
      },
      refresh() {
        this.$refs.table.refresh()
      },
      handleDel(record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      handleOk() {
        this.$refs.table.refresh()
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },
      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date())
        }
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    }
  }
</script>
